import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as demoActions from '../store/actions/demo.actions';
import ModalDemo from './ModalDemo';

const ReduxDemo = ({ count, increment, decrement, increment_async }) => {
  return (
    <div>
      <button onClick={() => increment_async(20)}>+</button>
      <span>{count}</span>
      <button onClick={() => decrement(5)}>-</button>
      <ModalDemo />

      <h6> redux-saga 解决的问题： 可以将异步操作从Action Creator 文件中抽离出来，放在一个单独的文件中</h6>
    </div>
  );
};

const mapStateToProps = state => ({
  count: state.count.count
});

const mapDispatchToProps = dispatch => bindActionCreators(demoActions, dispatch);

export default connect(mapStateToProps, mapDispatchToProps)(ReduxDemo);
